<template>
  <div class="home_container">
      <el-container>
  <el-header height="91px">
      <div class="logo">
      <a href="/" class="logo-link">
        <h1>
          <span class="mono">X某的~后花园</span>
        </h1>
      </a>
    </div>
  </el-header>
  <el-main><el-menu default-active="1" class="el-menu-demo" mode="horizontal" background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b">
  <el-menu-item index="1">首页</el-menu-item>
  <el-submenu index="2">
    <template slot="title">挨踢地带</template>
    <el-menu-item index="2-1">选项1</el-menu-item>
    <el-menu-item index="2-2">选项2</el-menu-item>
    <el-menu-item index="2-3">选项3</el-menu-item>
    <el-submenu index="2-4">
      <template slot="title">那些遇到的坑</template>
      <el-menu-item index="2-4-1">选项1</el-menu-item>
      <el-menu-item index="2-4-2">选项2</el-menu-item>
      <el-menu-item index="2-4-3">选项3</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="3" >资源集合</el-menu-item>
  <el-menu-item index="4">仓库</el-menu-item>
  <el-menu-item index="5" >如是我闻</el-menu-item>
  <el-menu-item index="6" >留言板</el-menu-item>
  <el-menu-item index="7" >关于 ···</el-menu-item>
  <el-menu-item><el-input v-model="searchValue" suffix-icon="el-icon-search" style="width:170px"> </el-input><i class="search" @click="search"></i></el-menu-item>
</el-menu>
  <div class="tips">
        <i class="el-icon-s-promotion"></i>
        <span> 本网站纯属个人娱乐，侵删，如果喜欢。关注一下吧~</span>
        <a href="login"><i class="el-icon-user"></i> 登录</a>
  </div>
  <div class="content">   
    <div class="maincontent fl">
      <router-view></router-view>
    </div> 
    <div class="subcontent fr">
      <el-card class="calendar">
        <!-- <el-calendar v-model="date"></el-calendar> -->
      </el-card>
      <el-card class="categories">
          <div class="categories_title">asjkfs </div>
          <!-- 渲染时，最后一段不要有border -->
          <div class="categories_box">
            <div class="article_name">卡时间段甲方靠的是</div>
            <div class="article_date">2019年3月18日</div>
          </div>
          <div class="categories_box">
            <div class="article_name">卡时间段甲方靠的是</div>
            <div class="article_date">2019年3月18日</div>
          </div>
        
      </el-card>
      <el-card class="sub_over">
        <div class="over_title">写在最后~</div>
        <div class="over_content">
          <p class="over_content">微博</p>
          <p class="over_content">微信</p>
          <p class="over_content">QQ</p>
          <p class="over_content">GitHub</p>
          <p class="over_content">Gitee</p>
        </div>
      </el-card>
    </div>
  </div>
  

</el-main>
</el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchValue: '',
      date: new Date()
    }
  },
  methods: {
    search(){
      console.log(this.searchValue)
    }
  },
}
</script>

<style lang="less" scpoed>
.home_container {
    height: 100%;
    .el-container {
        height: 100%;
        .el-header {
            // height: 0px;
        background-color: #1abc9c;
        position: relative;
        // overflow-y: scroll;
    }
    .el-main {
        background-color: #eeeeee;
        padding: 0;
        .el-menu {
            padding: 0 370px;
            margin: 0 auto;
            // width: 1200px;
            .el-menu-item {
              // font-size: 20px;  
              margin-right: 45px;
            }
            .el-menu-item:last-child {
              padding: 0;
              position: relative;
              margin-left: 64px;
              margin-right: 0;     
                .search {
                  width: 30px;
                  height: 30px;
                  position: absolute;
                  top: 18px;
                  right: 23px;
                  // background-color: black;
                }
            }
            .el-submenu {
                margin-right: 50px;
            }
        }
        .tips {
          box-sizing: border-box;
          width: 1200px;
          margin: 0 auto;
          padding: 10px;
          background-color: #fff;
          box-shadow: 5px 5px 10px #ccc;
          border-radius: 3px;
          font-size: 14px;
          i {
            line-height: 30px;
            // font-size: 15px;
          }
          span {
            color: #444;
          }
          a {
            line-height: 30px;
            margin-right: 15px;
            // font-size: 14px;
            float: right;
            color: #465653;
          }
          a:hover {
            color: #1abc9c;
          }
        }
        .content {
          width: 1200px;
            margin: 10px auto;
          .maincontent {
            width: 816px;
          }
          .subcontent {
            width: 365px;
            // background-color: black;
            .calendar {
             width: 100%;
             height: 300px;
            }
            .categories {
              margin-top: 10px;
              .categories_title {
                border-bottom: 1px solid #ccc;
                padding-bottom: 5px;
              }
              .categories_box {
                padding: 5px;
                border-bottom: 1px dashed #ddd;
                .article_name {
                  margin-top: 5px;
                  color: #1abc9c;
                }
                .article_date {
                  margin-top: 5px;
                  font-size: 12px;
                  color: #777;
                }
              }
            }
            .sub_over {
                margin-top: 10px;
              .over_title {
                padding-bottom: 7px;
                border-bottom: 1px solid #ccc;
              }
              .over_content {
                font-size: 14px;
                padding-left: 5px;
                margin-top: 5px;
                color: #e33e33;
              }
            }
          }
        }

        
    }
    }
// logo字体
.logo {
  background-color: #1abc9c;
  text-align: center;
  height: 84px;
  line-height: 84px;
}
.mono {
  letter-spacing: -2px;
  position: relative;
  color: #fff;
  font-size: 54px;
  text-shadow: 0 0 1px rgba(94, 255, 216, 0.8);
  margin: 0;
  padding: 0;
  z-index: 0;
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
.logo .bloger,
.logo .mono {
  text-shadow: inherit;
}
.logo h1:hover .mono {
  letter-spacing: 5px;
}
.logo h1 {
  font-family: ThemeLogo, "时尚中黑简体", "汉仪秀英体简", "思源黑体", "新丽黑",
    "华文行楷", "Microsoft Yahei", arial, sans-serif;
}
}
</style>